<!-- eslint-disable no-undef -->
<template>
  <el-container class="one">
    <el-aside width="200px" class="aside">
      <el-tree
        :data="data"
        :props="defaultProps"
        :highlight-current="true"
        :expand-on-click-node="false"
        :default-expanded-keys="['1024985257948084801']"
        :default-checked-keys="['1024985257948084801']"
        icon-class="el-icon-folder-add"
        node-key="id"
        :current-node-key="currentNodeKey"
        @node-click="handleNodeClick"
      />
    </el-aside>
    <el-main class="main">
      <el-row class="main-one-b" type="flex" justify="space-between">
        <div>作业范围</div>
        <div>
          <el-button v-if="showButton" type="danger" @click="submitMap">提交</el-button>
          <el-button v-if="!showButton" v-show="showMap===3" type="danger" @click="editBaiduMap">编辑</el-button>
          <el-button v-if="showButton" @click="callBaiduMap">取消</el-button>
        </div>
      </el-row>
      <div class="main-one">
        <span>地区关键词 : </span>
        <el-input v-model="keyword" size="medium" style="width:315px" placeholder="请输入地区关键词" @input="search" />
      </div>
      <div v-if="showButton">
        <el-button v-if="!isEditing" type="success" @click="beginDraw">开始绘制</el-button>
        <el-button v-else type="success" @click="stopDraw">停止绘制</el-button>
        <div class="warning"> <i class="el-icon-warning" /> 点击或拖动鼠标绘制作业范围，右击鼠标结束图形绘制，图形不可有交叉点。完成绘制后，点击提交按钮保存。每个机构仅可支持绘制一个作业范围</div>
      </div>
      <div>
        <baidu-map
          id="map-container"
          ak="rBa66hH2BPh8rRmDvBKmmne1tGtRtL1u"
          :center="center"
          :zoom="zoom"
          :scroll-wheel-zoom="true"
          @ready="handler"
        >
          <bm-polygon
            :path="polygonPath"
            stroke-color="#edcbc7"
            :stroke-opacity="0.7"
            stroke-style="dashed"
            :stroke-weight="1.3"
            fill-color="#edcbc7"
            :fill-opacity="0.7"
            :editing="isEditing"
            @lineupdate="updatePolygonPath"
          />
        </baidu-map>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { getTreeList, lineOfBusiness, asveBusinessSope } from '@/api/organization'
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import bmPolygon from 'vue-baidu-map/components/overlays/Polygon.vue'

export default {
  components: {
    BaiduMap,
    bmPolygon
  },
  data() {
    return {
      data: [],
      currentNodeKey: '1024985257948084801',
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      center: { lng: 123.162626, lat: 41.2669 },
      zoom: 10,
      polygonPath: [],
      keyword: '',
      map: null,
      nodeId: '1024985257948084801',
      showButton: false,
      isEditing: false,
      showMap: 3,
      list: {
        bid: null, // 业务id，可以是机构或快递员
        created: null, // 创建时间
        latitude: null, // 经度
        longitude: null, // 维度
        polygon: {}, // 多边形坐标点，至少3个坐标点，首尾坐标必须相同
        type: null, // 类型，1-机构，2-快递员
        updated: null // 更新时间

      }
    }
  },
  created() {
    this.getTreeList()
    this.handleNodeClick()
  },
  methods: {
    // 渲染树状图
    async getTreeList() {
      const res = await getTreeList()
      this.data = JSON.parse(res.data)
    },
    // 点击切换位置-区域
    async handleNodeClick(node) {
      if (node) {
        this.showMap = node.type
        this.nodeId = node.id
        this.center.lng = node.longitude
        this.center.lat = node.latitude
      }
      const { data } = await lineOfBusiness(this.nodeId, 1)
      this.list.bid = +data.bid
      this.list.created = +data.created
      this.list.latitude = +data.latitude
      this.list.longitude = +data.longitude
      this.list.type = +data.type
      this.list.updated = +data.updated
      if (data.bid) {
        this.polygonPath = data.polygon.map((item) => {
          return {
            lat: item.latitude,
            lng: item.longitude
          }
        })
      }
    },

    handler({ BMap, map }) {
      this.zoom = 10
    },
    updatePolygonPath(e) {
      const arr = e.target.getPath()
      this.list.polygon = arr.map((item) => {
        return {
          latitude: item.lat,
          longitude: item.lng
        }
      })
    },
    // 开始绘制地图
    beginDraw() {
      this.isEditing = true
    },
    // 停止绘制
    stopDraw() {
      this.isEditing = false
    },
    // 提交按钮
    async submitMap() {
      await asveBusinessSope(this.list)
      this.$message.success('操作成功')
      this.handleNodeClick()
      this.callBaiduMap()
    },
    // 模糊搜索
    search(text) {
      if (text) {
        this.center = text
      } else {
        this.center = { lng: 123.162626, lat: 41.2669 }
      }
    },
    editBaiduMap() {
      this.showButton = true
    },
    callBaiduMap() {
      this.showButton = false
    }
  }
}
</script>

<style scoped>
.one {
  background-color: #f3f4f7;
}
.aside {
  background-color: #fff;
  margin: 0 20px;
  padding-top: 20px;
  height: 880px;
}
.main {
  background-color: #fff;
  margin-right: 20px;
}
.main-one {
  /* height: 50px; */
  background-color: #fff;
  display: flex;
  justify-content: space-evenly;
}
#map-container {
  width: 100%;
  height: 730px;
  background-color: yellow;
}
.main-one-b{
background-color: #f8faff;
height: 50px;
line-height: 50px;
margin-bottom: 10px;
}
.main-one{
  width: 400px;
  height: 40px;
  line-height: 40px;
  margin-bottom: 10px;
  margin-left: 0;
}
.warning{
  width: 100%;
  height: 30px;
  background-color: #fdf5e8;
  color: #bc8131;
  line-height: 30px;
  margin-bottom: 10px;
  margin-top: 10px;
}
</style>
